<template>
	<div class="app-container" v-loading="loading">
		<div style="width: 840px; margin: 0 auto">
			<div style="display: flex; justify-content: space-between;">
				<div style="height: 28px; margin-top:14px;font-size: 14px;color: #000;">{{ ruleForm.name }}</div>
				<div>
					<el-button type="warning" size="small" class="bac759" @click="fangjia_show=true">
						{{ruleForm.is_holiday === 1?'编辑放假信息':'场馆放假'}}
					</el-button>
					<el-button type="success" size="small" class="bac6b7" @click="bianji_show=true">编辑</el-button>
				</div>
			</div>
			<div v-if="ruleForm.is_holiday === 1" class="tips">温馨提示：已设置场馆放假时间（{{ruleForm.holiday_start_time}} ~ {{ruleForm.holiday_end_time}}）；放假期间可为会员预约放假结束日期之后的课程，不能预约放假期间的课程。</div>
			<div class="flex-detail-box">
				<div class="field-box clear">
					<div class="item-l">
						<span class="fl label">联系人</span>
						<span class="fr">{{ ruleForm.username }}</span>
					</div>
					<div class="item-r">
						<span class="fl label">类型</span>
						<span class="fr">分店</span>
					</div>
				</div>
				<div class="field-box clear">
					<div class="item-l">
						<span class="fl label">联系手机</span>
						<span class="fr">{{ ruleForm.mobile }}</span>
					</div>
					<div class="item-r">
						<span class="fl label">联系电话</span>
						<span class="fr">{{ ruleForm.tel }}</span>
					</div>
				</div>
				<div class="field-box">
					<div class="item clear">
						<span class="fl label">所在地区</span>
						<span class="fr">{{ ruleForm.province }}{{ ruleForm.city }}{{ ruleForm.district }}</span>
					</div>
				</div>
				<div class="field-box">
					<div class="item clear">
						<span class="fl label">详细地址</span>
						<span class="fr">{{ ruleForm.address }}</span>
					</div>
				</div>
				<div class="field-box">
					<div class="item clear" style="display: flex; justify-content: flex-start;">
						<span class="fl label" style="width:240px">场馆图片</span>
						<div class="venue-cover">
							<el-image :src="ruleForm.cover_img" />
						</div>
					</div>
				</div>
				<div class="field-box">
					<div class="field-box__txt">
						<p>简介</p>
						<div class="normal-lh_s multi-line-text">
							{{ ruleForm.brief }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="fangjia_show || bianji_show" id="commonBg" class="m-dialog-bg" />
		<!--  场馆放假-->
		<div v-if="fangjia_show" class="m-dialog-box fade-in" style="width: 500px;top: 165px;margin-left: -250px;">
			<div class="dialog-content">
				<div class="dialog-content-header">
					<span class="dialog-title">场馆放假</span>
					<span class="dialog-close js-dialog_close" @click="fangjia_show=false" />
				</div>
				<div class="dialog-content-main">
					<div class="dialog-main-field flex-edit-box">
						<div class="field-box">
							<div class="item clear" style="margin-bottom: 8px;height: 50px;">
								<label class="fl label" style="line-height: 40px;"><span style="color:red;">*</span>
									开始时间</label>
								<div class="fr">
									<el-date-picker v-model="startdate" type="date" placeholder="请选择日期"
										@change="timeChange" :default-time="startdefaultTime" class="dateselect"
										:picker-options="{disabledDate:dateOptions1}" />
									<el-select v-model="starttime" placeholder="Select" size="large" class="timeselect"
										@change="timeChange">
										<el-option v-for="(item, index) in times" :key="index" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
						</div>
						<div class="field-box">
							<div class="item clear" style="margin-bottom: 8px;height: 50px;">
								<label class="fl label" style="line-height: 40px;"><span style="color:red;">*</span>
									结束时间</label>
								<div class="fr">
									<el-date-picker v-model="enddate" type="date" placeholder="请选择日期"
										@change="timeChange" :default-time="enddefaultTime" class="dateselect"
										:picker-options="{disabledDate:dateOptions1}" />
									<el-select v-model="endtime" placeholder="Select" size="large" class="timeselect"
										@change="timeChange">
										<el-option v-for="(item, index) in times" :key="index" :label="item.label"
											:value="item.value" />
									</el-select>
								</div>
							</div>
						</div>
						<div class="field-box">
							<div class="item clear" style="margin-bottom: 8px;height: 50px;">
								<label class="fl label" style="line-height: 40px;">放假事由</label>
								<div class="fr">
									<el-select v-model="vacation" placeholder="Select" size="large">
										<el-option label="节日放假" value="节日放假" />
										<el-option label="场馆装修" value="场馆装修" />
										<el-option label="其他" value="其他" />
									</el-select>
								</div>
							</div>
						</div>
						<div class="field-box" style="line-height: 42px;padding: 5px 15px;">
							<el-checkbox v-model="day" size="default" />
							场馆内全部会员卡及班课会员有效期顺延<span style="color: #6b7cdd;">{{ daynum }}</span>天
						</div>
					</div>
				</div>
				<div class="dialog-content-footer">
					<div class="normal">
						<el-button type="primary" class="bac6b7" @click.stop="baocunClick()">保存</el-button>
						<el-button type="info" @click="fangjia_show=false">取消</el-button>
					</div>
				</div>
			</div>
		</div>
		<!--  编辑-->
		<div v-if="bianji_show" class="m-dialog-box fade-in" style="width: 962px; top: 165px; margin-left: -481px;">
			<div class="dialog-content">
				<div class="dialog-content-header">
					<span class="dialog-title">编辑场馆</span>
					<span class="dialog-close js-dialog_close" @click="bianji_show=false" />
				</div>
				<div class="dialog-content-main">
					<div class="dialog-main-field flex-edit-box">
						<div class="dialog-field field-box clear disJuC" style="display: flex !important;">
							<div class="item-l">
								<label class="fl label"><em class="icon icon-required" /> 场馆名称</label>
								<el-input v-model="ruleForm.name" style="width: 66%; height: 100%" type="text"
									class="fr inp-230-34" name="addvenue_name" data-v="required" data-limit="1,20"
									data-msg="请输入场馆名称" placeholder="请输入场馆名称" />
							</div>
							<div class="item-r">
								<label class="fl label">联系电话</label>
								<el-input v-model="ruleForm.tel" style="width: 66%; height: 100%" type="text"
									name="addvenue_tel" class="fr inp-140-34" data-v="nonempty" data-rule="phone"
									data-msg="请输入联系电话" placeholder="请输入联系电话" />
							</div>
						</div>
						<div class="dialog-field field-box clear disJuC" style="display: flex !important;">
							<div class="item-l">
								<label class="fl label"><em class="icon icon-required" /> 联系手机</label>
								<el-input v-model="ruleForm.mobile" style="width: 66%; height: 100%" type="text"
									name="addvenue_phone" class="fr inp-140-34" data-v="required" data-rule="phone"
									data-msg="请输入联系手机" placeholder="请输入联系手机" />
							</div>
							<div class="item-r">
								<label class="fl label"><em class="icon icon-required" /> 联系人</label>
								<el-input v-model="ruleForm.username" style="width: 66%; height: 100%" type="text"
									name="addvenue_contacts" class="fr inp-140-34" data-v="required" data-msg="请输入联系人姓名"
									placeholder="请输入联系人姓名" />
							</div>
						</div>
						<div class="dialog-field field-box clear disJuC" style="display: flex !important;">
							<div class="item-l" style="display: flex;justify-content: space-between;">
								<label class="fl label"><em class="icon icon-required" /> 所在地区</label>
								<el-cascader v-model="address_data" class="inp1" :options="cascaderList"
									:props="optionProps" @change="handleChange" />
								<!--                <select id="addvenue_a" class="fr select-w120-h34" data-v="required" data-rule="neq" data-val="0" data-msg="请选择区县"><option value="0">请选择</option><option value="441302">惠城区</option><option value="441303">惠阳区</option><option value="441322">博罗县</option><option value="441323">惠东县</option><option value="441324">龙门县</option></select>-->
								<!--                <select id="addvenue_c" class="fr space-mr10 select-w82-h34" data-v="required" data-rule="neq" data-val="0" data-msg="请选择城市"><option value="0">请选择</option><option value="4401">广州市</option><option value="4402">韶关市</option><option value="4403">深圳市</option><option value="4404">珠海市</option><option value="4405">汕头市</option><option value="4406">佛山市</option><option value="4407">江门市</option><option value="4408">湛江市</option><option value="4409">茂名市</option><option value="4412">肇庆市</option><option value="4413">惠州市</option><option value="4414">梅州市</option><option value="4415">汕尾市</option><option value="4416">河源市</option><option value="4417">阳江市</option><option value="4418">清远市</option><option value="4419">东莞市</option><option value="4420">中山市</option><option value="4451">潮州市</option><option value="4452">揭阳市</option><option value="4453">云浮市</option></select>-->
								<!--                <select id="addvenue_p" class="fr space-mr10 select-w82-h34" data-v="required" data-rule="neq" data-val="0" data-msg="请选择省份"><option value="0">请选择</option><option value="11">北京市</option><option value="12">天津市</option><option value="13">河北省</option><option value="14">山西省</option><option value="15">内蒙古自治区</option><option value="21">辽宁省</option><option value="22">吉林省</option><option value="23">黑龙江省</option><option value="31">上海市</option><option value="32">江苏省</option><option value="33">浙江省</option><option value="34">安徽省</option><option value="35">福建省</option><option value="36">江西省</option><option value="37">山东省</option><option value="41">河南省</option><option value="42">湖北省</option><option value="43">湖南省</option><option value="44">广东省</option><option value="45">广西壮族自治区</option><option value="46">海南省</option><option value="50">重庆市</option><option value="51">四川省</option><option value="52">贵州省</option><option value="53">云南省</option><option value="54">西藏自治区</option><option value="61">陕西省</option><option value="62">甘肃省</option><option value="63">青海省</option><option value="64">宁夏回族自治区</option><option value="65">新疆维吾尔自治区</option><option value="71">台湾省</option><option value="81">香港特别行政区</option><option value="82">澳门特别行政区</option></select>-->
							</div>
							<div class="item-r">
								<label class="fl label"><em class="icon icon-required" /> 详细地址</label>
								<el-input id="addvenue_address" style="width: 66%; height: 100%" type="text"
									class="fr inp-310-34" value="永旺" data-v="required" data-rule="length"
									data-limit="1,50" data-msg="请输入详细地址(1~50个字符)" placeholder="请输入详细地址(1~50个字符)" />
							</div>
						</div>
						<div class="dis disAl itFor ites"
							style="width: 100%;background: #f2f2f2;display: flex;padding: 10px">
							<div>
								<span style="font-size: 14px;font-weight: bold">场馆图片</span>
							</div>
							<div class="dis disAl"
								style="margin-left: 150px;cursor: pointer;display: flex;align-items: center">
								<div calss="upImg bacFFF" style="display: flex;align-items: center">
									<el-upload action="#" :show-file-list="false" :http-request="handleAvatarSuccess1"
										:before-upload="beforeAvatarUpload" class="">
										<div class="que bacFFF"
											style="border: 1px solid #C9C9C9;background: #6b7cdd;color:#fff;border: none">
											上传图片</div>
									</el-upload>
									<img v-if="ruleForm.cover_img" :src="ruleForm.cover_img" class="wh100"
										style="width: 170px;margin-left: 20px;height: 100px;">
								</div>
								<div style="margin-left: 30px;color: #b8b8b8;font-size: 14px">建议尺寸:690*240像素
								</div>
							</div>
						</div>
						<div class="field-box clear">
							<div class="dialog-field-remark-box item clear disJuB" style="display: flex;">
								<label class="fl label">简介</label>
								<el-input id="venueIntroduce" v-model="ruleForm.brief"
									style="height: 158px; width: 720px;" type="textarea"
									class="dialog-field-remark dialog-field-remark2" data-v="nonempty"
									data-rule="editor" data-limit="0,1000" data-msg="请填写1000字之内" data-size="1000" />
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-content-footer">
					<el-button type="primary" @click="submitform">保存</el-button>
					<el-button type="info" @click="quxiao">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import cascaderJSON from '@/views/member/components/cascaderList.json'
	import {
		regionData,
		CodeToText
	} from 'element-china-area-data'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		savebrand,
		getbrandinfo2,
		getHoliday
	} from '@/api/brand'
	import {
		mapGetters
	} from 'vuex'
	import {
		uploadimg
	} from '@/api/utils' // Secondary package based on el-pagination
	export default {
		data() {
			return {
				cascaderList: cascaderJSON,
				optionProps: {
					value: 'value',
					label: 'value',
					children: 'children'
				},
				ruleForm: {
					id: '',
					name: '',
					tel: '',
					mobile: '',
					username: '',
					province: '',
					city: '',
					district: '',
					address: '',
					cover_img: '',
					brief: '',
					createtime: 1726810293,
					deletetime: 0,
					state: '',
					holiday_start_time: 0,
					holiday_end_time: 0,
					holiday_msg: null,
					uid: '',
					is_holiday: 0
				},
				loading: false,
				list: null,
				fangjia_show: false,
				bianji_show: false,
				times: [],
				starttime: '00',
				startdate: new Date(),
				startdefaultTime: '',
				endtime: '00',
				enddate: '',
				enddefaultTime: '',
				vacation: '节日放假',
				day: false,
				daynum: 0,
				options: regionData,
				address_data: [],
				selectedOptions: [],
				textarea: '',
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6;
				},
				dateOptions1(time) {
					return time.getTime() < Date.now() - 8.64e7;
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '场馆设置',
				url: '/venue/venues',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			for (var i = 0; i < 24; i++) {
				this.times.push({
					label: i < 10 ? '0' + i : i,
					value: i
				})
			}
			this.getList()
		},
		methods: {
			baocunClick() {
				if (this.startdate && this.enddate) {
					this.fangjia_show = false
					var params = {
						'start_time': this.startdate,
						'end_time': this.enddate,
						'reason': this.vacation,
						'postpone': this.day?1:0
					}
					getHoliday(params).then(response => {
						const {
							data
						} = response
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				} else {
					this.$message.error('请选择日期');
				}
			},
			timeChange(e) {
				if (this.startdate && this.enddate) {
					var sta = new Date(this.startdate).setHours(0, 0, 0, 0)
					var end = new Date(this.enddate).setHours(0, 0, 0, 0)
					if (end < sta || (end === sta && this.endtime < this.starttime)) {
						this.enddate = ''
						this.daynum = 0
						this.$message.error('截止时间不得小于开始时间');
					} else {
						this.daynum = parseInt((end - sta) / (24 * 60 * 60 * 1000)); //天
					}
				} else {
					this.daynum = 0
				}
			},
			quxiao() {
				this.bianji_show = false
				this.getList()
			},
			handleAvatarSuccess1(file) {
				const mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					const {
						data
					} = response
					this.ruleForm.cover_img = data
				})
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(value) {
				this.getCodeToText(value)
			},
			getCodeToText(codeArray) {
				let area = ''
				switch (codeArray.length) {
					case 1:
						area += CodeToText[codeArray[0]]
						break
					case 2:
						area += CodeToText[codeArray[0]] + '/' + CodeToText[codeArray[1]]
						break
					case 3:
						area +=
							CodeToText[codeArray[0]] +
							'/' +
							CodeToText[codeArray[1]] +
							'/' +
							CodeToText[codeArray[2]]
						break
					default:
						break
				}
			},
			submitform() {
				var params = this.ruleForm
				params.province = this.address_data[0]
				params.city = this.address_data[1]
				params.district = this.address_data[2]
				this.bianji_show = false
				this.loading = true
				savebrand(params).then(response => {
					const {
						data
					} = response
					this.getList()
					this.loading = false
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			},
			getList() {
				this.loading = true
				getbrandinfo2({}).then(response => {
					const {
						data
					} = response
					this.loading = false
					Object.keys(this.ruleForm).forEach((key) => {
						if (data[key] !== undefined) this.ruleForm[key] = data[key]
					})
					console.log(this.ruleForm)
					this.address_data = [data.province, data.city, data.district]
					if(data.is_holiday === 1){
						this.startdate = data.holiday_start_time
						this.enddate = data.holiday_end_time
						this.vacation = data.holiday_msg
						this.day = data.postpone === 1?true:false
						this.timeChange()
					}
				}).catch(error => {
					this.loading = false
				})
			},
			handleSelectionChange(val) {
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	.field-box {
		margin-bottom: 2px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.item-l {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
		border-right: 2px solid #fff;
	}

	.item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.item {
		padding: 5px 15px;
	}

	.venue-cover {
		width: 150px;
		max-height: 84px;
		overflow: hidden;
	}

	.field-box__txt {
		padding: 5px 15px 12px;
	}

	.multi-line-text {
		line-height: 1.5;
		white-space: pre-wrap;
	}

	div {
		display: block;
		unicode-bidi: isolate;
	}

	.m-dialog-box {
		position: absolute;
		width: 962px;
		left: 50%;
		top: 50%;
		margin-left: -480px;
		z-index: 1200;
		opacity: 0;
		transition: all .2s ease-in-out;
		background: #fff;
	}

	.fade-in {
		opacity: 1;
	}

	.dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg?v=ed587d0) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.hide {
		display: none !important;
	}

	.timeselect {
		width: 80px;
		height: 34px;
		display: inline-block;
		padding: 0 8px;
		border-radius: 4px;
	}

	.dateselect {
		width: 142px;
		height: 32px;
		display: inline-block;
		cursor: pointer;
	}

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	/deep/ .el-input__inner {
		//width: 190px;
		height: 32px;
	}

	/deep/ .el-textarea__inner {
		height: 100%;
	}

	/deep/ .el-input__icon {
		line-height: 32px !important;
	}

	.dialog__venue-cover-tips {
		margin-left: 30px;
		color: #b8b8b8;
	}
	.tips {
	    padding: 5px 0 10px;
	    font-size: 12px;
	    color: #e84577;
	}
</style>